<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Chat</title>
    <script type="text/javascript">
        var webSocket = new WebSocket("ws://localhost:8080/chat");
        var sendMsg = function () {
            var inputElement = document.getElementById("msg");
            webSocket.send(inputElement.value);
            inputElement.value = "";
        };
        var send = function (event) {
            if(event.keyCode == 13){
                sendMsg();
            }
        };

        webSocket.onopen = function () {
          webSocket.onmessage = function (event) {
           var show = document.getElementById("show");
           show.innerHTML += event.data + "<br>";
           show.scrollTop = show.scrollHeight;
          };
          document.getElementById("msg").onkeydown = send;
          document.getElementById("send").onclick = sendMsg;
        };
        webSocket.onclose = function () {
            document.getElementById("msg").onkeydown = null;
            document.getElementById("send").onclick = null;
            console.log('webSocket Closed');
        };
    </script>
</head>
<body>
<div align="center">
<div style="width: 600px;height: 200px;overflow-y: auto;border: 1px solid #333;" id="show">
</div>
<div>
    <input type="text" size="80" id="msg" name="msg" placeholder="请输入"/>
    <input type="button" value="发送" id="send" name="send">
</div>
</div>
</body>
</html>
